<template>
	<view class="content">
		<u-navbar title="设置" :is-back="true" :background="background" titleColor="#fff">
			<!-- 添加返回按钮 -->
			<u-icon slot="left" name="arrow-left" color="#ffffff" @click="goBack"></u-icon>
		</u-navbar>
		<h1 class="title">个人信息设置</h1>
		<view class="form">
			<form @submit.prevent="saveUserInfo">
				<div class="form-group">
					<label for="username">用户名</label>
					<input class="input" type="text" id="username" v-model="userinfo.username" placeholder="请输入用户名"
						required />
				</div>
				<div class="form-group">
					<label for="email">邮箱</label>
					<input class="input" type="email" id="email" v-model="userinfo.email" placeholder="请输入邮箱"
						required />
				</div>
				<div class="form-group">
					<label for="sex">性别</label>
					<select class="input" id="sex" v-model="userinfo.sex" required>
						<option value="男">男</option>
						<option value="女">女</option>
					</select>
				</div>
				<div class="form-group">
					<label for="address">地址</label>
					<input class="input" type="text" id="address" v-model="userinfo.address" placeholder="请输入地址"
						required />
				</div>
				<div class="form-group">
					<label for="birth">生日</label>
					<input class="input" type="date" id="birth" v-model="userinfo.birth" required />
				</div>
				<div class="loginBtn" @click="saveUserInfo">
					<text class="btnValue">保存</text>
				</div>
			</form>
		</view>
	</view>
</template>

<script>
	import {
		onMounted
	} from 'vue';

	export default {
		data() {
			return {
				background: {
					'background-image': 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))'
				},
				userinfo: {
					id: '',
					username: '',
					sex: '',
					email: '',
					address: '',
					birth: ''
				}
			};
		},
		methods: {
			getUserInfo() {
				console.log(1111111);
				let userInfo = localStorage.getItem('userinfo');
				console.log(userInfo)
				 const token = JSON.parse(userInfo).tokenStr;
				// if (!token) {
				//   console.error('Token not found in Vuex store');
				//   return;
				// }
				console.log(token)
				uni.request({
					url: 'http://localhost:8084/user/detail',
					method: 'GET',
					 header: {
					   'Authorization': 'Bearer ' + token
					 },
					success: (res) => {
						console.log(111);
						console.log(res)
						if (res.statusCode === 200 && res.data.status === 1) {
							const userInfo = res.data.successMessage;
							this.userinfo = {
								id: userInfo.id,
								username: userInfo.username,
								sex: userInfo.sex === '1' ? '男' : '女',
								email: userInfo.email,
								address: userInfo.address,
								birth: new Date(userInfo.birth).toISOString().split('T')[0]
							};
						} else {
							uni.showToast({
								title: res.data.errorMessage || '获取用户信息失败',
								icon: 'none'
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							title: '网络请求失败，请检查网络或服务器状态',
							icon: 'none'
						});
					}
				});
			},
			saveUserInfo() {
				const {
					username,
					sex,
					address,
					email,
					birth
				} = this.userinfo;
				if (!username || !sex || !address || !email || !birth) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				uni.showLoading({
					title: '保存中'
				});

				{



					uni.request({
						url: 'http://localhost:8084/user/change',
						method: 'PUT',
						data: {
							id: this.userinfo.id,
							username,
							sex: sex === '男' ? '1' : '0',
							address,
							email,
							birth: new Date(this.userinfo.birth).toISOString().split('T')[0]
						},
						success: (res) => {
							uni.hideLoading();
							console.log(res.data)
							console.log( JSON.parse(JSON.stringify(res.data)).stauts)
							if (res.data.status === 1) {
								uni.showToast({
									title: '保存成功',
									icon: 'success'
								});
								uni.setStorageSync('userInfo', this.userinfo);
							} else {
								uni.showToast({
									title: res.data.errorMessage || '保存失败',
									icon: 'none'
								});
							}
						},
						fail: (err) => {
							uni.hideLoading();
							uni.showToast({
								title: '网络请求失败，请检查网络或服务器状态',
								icon: 'none'
							});
						}
					});
				}

				// this.req('change', {
				//   id: this.userinfo.id,
				//   username,
				//   sex: sex === '男' ? '1' : '0',
				//   address,
				//   email,
				//   birth: new Date(birth).toISOString()
				// }).then(res => {
				//   uni.hideLoading();
				//   if (res.status === 1) {
				//     uni.showToast({
				//       title: '保存成功',
				//       icon: 'success'
				//     });
				//     uni.setStorageSync('userInfo', this.userinfo);
				//   } else {
				//     uni.showToast({
				//       title: res.errorMessage || '保存失败',
				//       icon: 'none'
				//     });
				//   }
				// }).catch(err => {
				//   uni.hideLoading();
				//   uni.showToast({
				//     title: '网络请求失败，请检查网络或服务器状态',
				//     icon: 'none'
				//   });
				// });
			},
			req(action, params) {
				return new Promise((resolve, reject) => {
					uni.request({
						url: `http://localhost:8084/user/${action}`,
						method: 'POST',
						data: params,
						header: {
							'Content-Type': 'application/json',
							'Authorization': 'Bearer ' + uni.getStorageSync('uni_id_token')
						},
						success: (res) => {
							if (res.statusCode === 200) {
								resolve(res.data);
							} else {
								reject(res.data);
							}
						},
						fail: (err) => {
							reject(err);
						}
					});
				});
			}
		},
		created() {
			this.getUserInfo();
		},
		mounted() {
			// 使用 mounted 钩子替代 onShow
			this.getUserInfo();
		}
	};
</script>

<style>
	.content {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.title {
		margin-bottom: 40px;
		color: #333333;
	}

	.form {
		width: 80%;
	}

	.form-group {
		margin-bottom: 20px;
	}

	.form-group label {
		display: block;
		margin-bottom: 5px;
		color: #333333;
	}

	.input {
		width: 100%;
		height: 80upx;
		background: white;
		border-radius: 20px;
		border: 0.5px solid #a3a3a3;
		box-sizing: border-box;
		padding: 0 20px;
		font-size: 15px;
	}

	.loginBtn {
		width: 100%;
		height: 80upx;
		background: #a3a3a3;
		border-radius: 50upx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loginBtn .btnValue {
		color: white;
	}

	.forgotBtn {
		text-align: center;
		color: #8d8d8d;
		font-size: 15px;
		margin-top: 20px;
	}
</style>